<%--
  Created by IntelliJ IDEA.
  User: lxm
  Date: 2018/3/15
  Time: 下午1:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="fsvs demo" lang="zh">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <jsp:include page="../static/common/stylesheets.jsp"></jsp:include>

    <link href="/static/layui/css/weibo/style.css" rel="stylesheet">
    <title>微博分析</title>
</head>
<body style="position: relative;">
<jsp:include page="../static/common/header.jsp"></jsp:include>

<div id="top-image" style="height: 1080px; width: 100%; background-position: -125px 0px;">
    <div id="content" class="container center-block">
        <div class="jumbotron">
            <div class="container">
                <h1>Weibo Analyze</h1>
                <p>输入要分析的博主ID，为您分析开放性的博主数据。</p>
                <p>Input your Weibo ID link under the box</p>
                <div class="input-group input-group-lg">
                    <input id="userID" type="text"
                           style="width:400px;height: 46px;color: #2B2E37;font-family:Arial;display: inline;"
                           name="title" required="" lay-verify="required" placeholder="请输入要分析的用户ID" autocomplete="off"
                           class="layui-input"><span class="input-group-btn">
			<button id="startAnalyze" class="layui-btn"
                    style="width: 55px;height: 46px;display: inline;margin-top: -10px;">
                <i class="layui-icon"></i>
            </button>
			</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fsvs-body">
    <div class="slide" id="fsvs-initial-setup">
        <h2 class="htmleaf-title">用户微博一览</h2>
        <div class=""
             style="width: 1170px;  background: #f5f2f0; height: 608px;border-radius: 10px;margin-left: auto; margin-right: auto;">
            <table class="layui-hide" id="table_weibo"></table>
        </div>
    </div>
    <div class="slide" id="basic-html-setup">
        <h2>微博发布时间可视化</h2>
        <div class="layui-container"
             style="background: #f5f2f0; height: 608px;margin-left: auto; margin-right: auto;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">年活跃图</li>
                    <li>月活跃图</li>
                    <li>日活跃图</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="div_year_line" style="width: 1145px;height:550px;"></div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="div_month_line" style="width: 1145px;height:550px;"></div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="div_day_line" style="width: 1145px;height:550px;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="slide">
        <h2>微博常用数据统计</h2>
        <div class="layui-container"
             style="background: #f5f2f0; height: 608px;margin-left: auto; margin-right: auto;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">原创 vs 转发</li>
                    <li>点赞 vs 转发</li>
                    <li>常用设备</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="div_self_repost_line" style="width: 1145px;height:550px;"></div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="div_repost_upvote_line" style="width: 1145px;height:550px;"></div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="div_devices_line" style="width: 1145px;height:550px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <h2>词云-博主所有微博的词频可视化</h2>
        <div class="layui-container"
             style="background: #f5f2f0; height: 608px;margin-left: auto; margin-right: auto;  ">
            <div id="div_wordcloud_line" style="width: 1145px;height:550px;"></div>
        </div>
    </div>
    <div class="slide">
        <h2>情感倾向-博主微博的情感极性</h2>
        <div class="layui-container"
             style="background: #f5f2f0; height: 608px;margin-left: auto; margin-right: auto;  ">
            <div id="div_emotion_pie" style="width: 1145px;height:550px;"></div>
        </div>
    </div>
    <div class="slide">
        <h2>博主社交网络可视化</h2>
        <div class="layui-container"
             style="background: #f5f2f0; height: 608px;margin-left: auto; margin-right: auto;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">1层社交网络可视化</li>
                    <li>2层社交网络可视化</li>
                    <li>2层社交网络地域可视化</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="div_level_1_force" style="width: 1145px;height:550px;"></div>
                    </div>
                    <div class="layui-tab-item">
                        <button id="btn_render" class="layui-btn" type="button">点击渲染</button>
                    </div>
                    <div class="layui-tab-item" style="background: rgb(50, 60, 72)">
                        <div id="div_level_1_map" style="width: 1170px;height:560px;margin-left: -24px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<jsp:include page="../static/common/footer.jsp"></jsp:include>
<jsp:include page="../static/common/scripts.jsp"></jsp:include>
<script src="/static/layui/js/weibo/jquery-migrate-1.2.1.min.js"></script>
<script src="/static/layui/js/weibo/bundle.js"></script>
<script src="/static/layui/js/weibo/jquery.swipe-events.js"></script>
<script src="/static/layui/js/weibo/prismjs.js"></script>
<script src="/static/layui/js/weibo/fsvs.js"></script>
<script src="/static/layui/js/weibo/main.js"></script>
<script src="/static/layui/js/weibo/ios-parallax.js"></script>
<%--两个图表的加载--%>

<script src="/static/layui/js/charts/Echarts/map/js/staticMap.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts.min.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts-gl.js"></script>
<script src="/static/layui/js/charts/Echarts/map/js/china.js"></script>
<!-- 引入echart的主题 -->
<script src="/static/layui/js/charts/Echarts/theme/macarons.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/roma.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/shine.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/infographic.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#top-image').iosParallax({
            movementFactor: 50
        });
        $('#fsvs-pagination').css('display', 'none');
        $('#fsvs-body').css('display', 'none');

    });

    //开始分析按的按钮
    $('#startAnalyze').click(function () {
        var ID = $('#userID').val();
        getAllInfo(ID);
        setTimeout(function () {
            $('.layui-form.layui-border-box.layui-table-view').css('border-radius', '20px');
        }, 2000);
        $('#fsvs-pagination').css('display', 'block');
        $('#fsvs-body').css('display', 'block');

    });
</script>
<script src="/static/layui/js/weibo/weiboLogic.js"></script>
<script>
    //更新导航
    nowPageName("vir");
</script>
</body>
</html>
